<template>
  <view class="question">
    <view class="time" v-if="show">
      <view class="left">
        <text class="over">剩余时间</text>
        <view class="down">
          <text>{{ minute }}</text>
        </view>
      </view>
      <view class="right">
        <button @click="submit">提交试卷</button>
      </view>
    </view>
    <view class="heander" v-if="show">
      <view class="right">
        <text>{{ idx + 1 }}</text>
        <text class="gray">/{{ question.length }}</text>
      </view>
    </view>
    <view v-for="(_item, i) in questionArr.problem" :key="i">
      <view class="content"> {{ _item.subject }} </view>
      <view class="anwser">
        <view
          class="area"
          v-for="(x, index) in _item.option"
          :key="index"
          @click="changeAnwser(x.text, index, x.checked)"
        >
          <view :class="['option', x.checked === true ? 'active' : '']">{{
            option[index]
          }}</view>
          <text>{{ x.text }}</text>
        </view>
      </view>
    </view>
    <view class="bootom" v-if="!show">
      <text>正确答案: C</text>
      <text>你的答案: A</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "question",
  props: {
    question: {
      type: Array,
      default: () => [],
    },
    idx: {
      type: Number,
      default: 0,
    },
    minute: {
      type: String,
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    questionArr() {
      return this.question[this.idx];
    },
  },
  watch: {
    // questionArr(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
  },
  data() {
    return {
      option: ["A", "B", "C", "D"],
    };
  },
  onShow() {},
  methods: {
    changeAnwser(val, index, judge) {
      this.$emit("click", val, index, judge);
    },
    submit() {
      this.$emit("submit");
    },
  },
};
</script>

<style lang="scss" scpoed>
.question {
  width: 686rpx;
  height: 812rpx;
  border: 1rpx solid #f8f8f8;
  margin: auto;
  padding: 40rpx;
  box-sizing: border-box;
  background-color: #fff;
  .time {
    display: flex;
    // height: 100rpx;
    align-items: center;
    margin: 20rpx 0 50rpx 0;
    justify-content: space-between;
    .left {
      color: #8890a5;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      .over {
        margin-right: 20rpx;
        font-size: 26rpx;
      }
      .down {
        color: #2e73fc;
        font-size: 28rpx;
        font-weight: 600;
        margin-left: 20rpx;
      }
    }
    .right {
      button {
        width: 160rpx;
        height: 56rpx;
        background-color: rgba($color: #2e73fc, $alpha: 0.1);
        font-size: 28rpx;
        text-align: center;
        line-height: 56rpx;
        color: #2e73fc;
        border-radius: 30rpx;
      }
    }
  }

  .heander {
    // height: 40rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 32rpx;
    padding-bottom: 35rpx;
    box-sizing: border-box;

    .left {
      display: flex;
      align-items: center;
      font-weight: 600;

      & text:last-child {
        font-size: 24rpx;
        color: rgb(192, 181, 181);
      }
    }

    .right {
      font-size: 40rpx;
      font-weight: 600;
      .gray {
        font-size: 24rpx;
        color: rgb(192, 181, 181);
      }
    }
  }

  .content {
    font-size: 30rpx;
    margin: 20rpx 0 60rpx 0;
  }

  .anwser {
    font-size: 28rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .area {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .option {
        width: 68rpx;
        height: 68rpx;
        background-color: #f5f7fb;
        // background-color: red;
        border-radius: 50%;
        line-height: 68rpx;
        text-align: center;
        font-size: 36rpx;
        margin-right: 30rpx;
        &.active {
          background-color: #2e73fc;
          color: #fff;
        }
      }
    }
  }
  .bootom {
    font-size: 30rpx;
    & text:first-child {
      color: #2e73fc;
      margin-right: 60rpx;
    }
    & text:last-child {
      color: #fcb94f;
    }
  }
}
</style>
